<template>
	<view class="page">
		<view class="top-account-information">
			<view class="bg-image"></view>
			<view class="account-information">
				<view class="top-info">
					<view class="title">账户余额（元）</view>
					<view class="btn" @click="to('/pages/MinePages/spread/withdrawals?type=1')">申请提现</view>
				</view>
				<view class="money">{{ accountInfo.balance }}</view>
				<view class="bottom-info">
					<view class="left-bottom-item">
						<view>{{ accountInfo.yesterdayIncome || 0 }}</view>
						<view>昨日收入（元）</view>
					</view>
					<view class="right-bottom-item">
						<view>{{ accountInfo.cumulativeWithdrawal || 0 }}</view>
						<view>累计提现（元）</view>
					</view>
				</view>
			</view>
		</view>

		<view class="grid-list">
			<!-- <button open-type="share" class="item">
				<image src="/static/images/tgshare@2x.png" mode="aspectFit"></image>
				<view>推广分享</view>
			</button> -->
			<view class="item" v-for="(item, index) in toolsGrid" :key="index" @click="to(item.page)">
				<image :src="item.icon" mode="aspectFit"></image>
				<view>{{ item.name }}</view>
			</view>
		</view>
	</view>
</template>

<script>
import { promotionAccount } from '@/apis/request.js';

export default {
	data() {
		return {
			toolsGrid: [
				{
					icon: '/static/images/tgshare@2x.png',
					name: '推广分享',
					page: '/pages/MinePages/share/index'
				},
				{
					icon: '/static/images/sharetj@2x.png',
					name: '推广统计',
					page: '/pages/MinePages/spread/spreadStats'
				},
				{
					icon: '/static/images/commissionmx@2x.png',
					name: '佣金明细',
					page: '/pages/MinePages/spread/moneyDetail'
				},
				{
					icon: '/static/images/tgsharedd@2x.png',
					name: '推广订单',
					page: '/pages/MinePages/spread/promoteOrder'
				},
				{
					icon: '/static/images/brothersthbrothers@2x.png',
					name: '推广排行',
					page: '/pages/MinePages/spread/promoteRank'
				},
				{
					icon: '/static/images/yhjuseniority@2x.png',
					name: '佣金排行',
					page: '/pages/MinePages/spread/moneyRank'
				},
				{
					icon: '/static/images/mycomment.png',
					name: '提现记录',
					page: '/pages/MinePages/spread/withdrawalHistory'
				}
			],
			accountInfo: ''
		};
	},
	onShow() {
		uni.$on('popularizeMoneyChange', () => {
			this.getAccount();
		});
	},
	methods: {
		to(url) {
			uni.navigateTo({
				url
			});
		},
		getAccount() {
			promotionAccount().then(res => {
				this.accountInfo = res;
			});
		}
	},
	onLoad() {
		this.getAccount();
	}
};
</script>

<style lang="scss" scoped>
.page {
	.top-account-information {
		width: 670rpx;
		height: 330rpx;
		border-radius: 50rpx;
		margin: 30rpx auto 40rpx auto;
		position: relative;
		color: #fff;

		.bg-image {
			flex-shrink: 0;
			width: 670rpx;
			height: 330rpx;
			background: linear-gradient(52deg, #32C59A, #1a689fff);
			border-radius: 50rpx;
		}

		.account-information {
			.top-info {
				.title {
					position: absolute;
					top: 60rpx;
					left: 254rpx;
				}

				.btn {
					position: absolute;
					right: 20rpx;
					top: 54rpx;
					width: 130rpx;
					height: 54rpx;
					line-height: 54rpx;
					border-radius: 28rpx;
					border: 2rpx solid #fff;
					font-size: 24rpx;
					text-align: center;
				}
			}

			.money {
				position: absolute;
				text-align: center;
				top: 100rpx;
				width: 100%;
				font-size: 100rpx;
			}

			.bottom-info {
				font-size: 24rpx;
				display: flex;
				align-items: center;
				text-align: center;
				justify-content: space-around;

				.left-bottom-item {
					position: absolute;
					left: 140rpx;
					bottom: 38rpx;
				}

				.right-bottom-item {
					position: absolute;
					right: 140rpx;
					bottom: 38rpx;
				}
			}
		}
	}

	.grid-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		padding: 0rpx 30rpx;

		.item {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			width: 172upx;
			padding: 20upx 0;

			image {
				width: 50upx;
				height: 50upx;
			}

			view {
				margin-top: 10upx;
				color: #333333;
				font-size: 24upx;
			}
		}
	}
}

/deep/ .u-back-text {
	min-width: 70rpx;
}

button::after {
	border: none;
}

button {
	position: relative;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0px;
	padding-right: 0px;
	box-sizing: border-box;
	text-align: center;
	text-decoration: none;
	line-height: 1.35;
	-webkit-tap-highlight-color: transparent;
	overflow: hidden;
	background-color: #fff;
}
</style>
